<template>
  <section class="component bill-check" v-loading:body="importLoading">
    <el-form>
      <el-form-item>
        <file-upload ref="file-upload" :showSM=1 :fileList.sync="fileList" :fileNumberLimit="1" :AllowExtension="['xlsx','xls']"></file-upload>
      </el-form-item>
    </el-form>
    <div class="operate-buttons">
      <el-button @click="close">取消</el-button>
      <el-button @click="submit">确定</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Auth, Layout, Dependencies } from "~/core/decorator";
import FileUpload from "~/components/common/file-upload.vue";
import { PageService } from "~/utils/page.service";
import { OutsourceReconciliationManageService } from "~/services/domain-service/outsource-reconciliation-manage.service";
import { Emit } from 'vue-property-decorator';

// @Auth(414)
@Layout('workspace')
@Component({
  components: {
    FileUpload
  }
})
export default class BillCheck extends Vue {
  @Dependencies(PageService) private pageService: PageService;
  @Dependencies(OutsourceReconciliationManageService)
  private outsourceReconciliationService: OutsourceReconciliationManageService;

  private fileList: any = [];
  private importLoading: boolean = false;

  @Emit('refreshData')
  private refreshData() { }
  @Emit('close')
  private close() {
    this.refresh()
  }

  /**
   * 确认核对
   */
  private submit() {
    if (this.fileList.length === 0) {
      this.$message('请先上传文件')
      return
    }
    if (this.fileList.length > 1) {
      this.$message('请最多上传一个文件')
      return
    }
    const fileId = this.fileList[0].response.id
    this.outsourceReconciliationService.checkBill(fileId).subscribe(
      data => {
        this.$message.success('核对成功')
        this.refreshData()
        this.close()
      }
    )
  }

  private refresh() {
    const fileUpload: any = this.$refs['file-upload']
    fileUpload.reset()
  }
}
</script>

<style scoped>
.group {
  margin-bottom: 0px !important;
  margin-top: 5px;
}
</style>
